<template>
    <div class="form">
        <h1>form</h1>
        
        
        <el-container>
            <el-main>
                
                
                
                <el-row class="demo-autocomplete">
                  <el-col :span="12">
                    <div class="sub-title">激活即列出输入建议</div>
                    <el-autocomplete
                      class="inline-input"
                      v-model="state1"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入内容"
                      @select="handleSelect"
                    ></el-autocomplete>
                  </el-col>
                  <el-col :span="12">
                    <div class="sub-title">输入后匹配输入建议</div>
                    <el-autocomplete
                      class="inline-input"
                      v-model="state2"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入内容"
                      :trigger-on-focus="false"
                      @select="handleSelect"
                    ></el-autocomplete>
                  </el-col>
                </el-row>
                
                
                
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input v-model="user" clearable placeholder="yonghuming"></el-input>
                        <el-input v-model="pass" placeholder="密码" show-password></el-input>
                        <el-input suffix-icon="el-icon-phone" placeholder="带图标的"></el-input>
                        <el-input size="mini" prefix-icon="el-icon-star-off" placeholder="带图标的"></el-input>
                        <el-input placeholder="123">
                            <template slot="prepend">Http://</template>
                        </el-input>
                        <el-button>立即注册</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-input
                          type="textarea"
                          :rows="2"
                          autosize
                          placeholder="请输入内容"
                          v-model="textarea">
                        </el-input>
                        
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容"
                          v-model="textarea2">
                        </el-input>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        
        <h2>indeterminate 状态</h2>
        <p>{{ cities }}</p>
        <p>{{ checkedCities }}</p>
        <p>{{ checkAll }}</p>
        <p>{{ isIndeterminate }}</p>
        
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <br><br>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
        </el-checkbox-group>


        <h2>Checkbox Group</h2>
        <p>{{ arr }}</p>
        <el-checkbox-group v-model="arr">
            <el-checkbox label="复选框1"></el-checkbox>
            <el-checkbox label="复选框2"></el-checkbox>
            <el-checkbox label="复选框3"></el-checkbox>
            <el-checkbox label="复选框4" disabled></el-checkbox>
            <el-checkbox label="复选框5"></el-checkbox>
        </el-checkbox-group>

        <h2>Checkbox</h2>
        <p>{{ checked }}</p>
        <el-checkbox v-model="checked">同意注册协议</el-checkbox>

        <h2>Radio</h2>
        <p>{{ radio4 }}</p>
        <el-radio-group v-model="radio4" size="mini" @change="r4">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
    </div>
</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        name: 'Form',
        data() {
            return {
                radio4: '上海',
                checked: true,
                arr: ['复选框1', '复选框4'],
                cities: cityOptions,
                checkedCities: ['上海', '北京'],
                checkAll: false,
                isIndeterminate: true,
                user:'',
                pass:'',
                textarea: '',
                textarea2: ''
            }
        },
        methods: {
            r4(e) {
                console.log("选中的是：" + e);
                console.log("最新结果：" + this.radio4);
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            handleCheckAllChange(val){
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            }
        }
    }
</script>

<style scoped>

</style>
